export default {
  grid: {
    left: '40px',
    top: '35px',
    right: '80px',
    bottom: '35px'
  },
  xAxis: {
    type: 'value',
    min: 1,
    max: 12.5,
    splitNumber: 22,
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#999'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    },
    name: '加权ROE%',
    nameTextStyle: {
      color: '#999'
    }
  },
  yAxis: {
    type: 'value',
    min: 11,
    max: 15.5,
    splitNumber: 8,
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#999'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    },
    name: '资本充足率%',
    nameTextStyle: {
      color: '#999'
    }
  },
  tooltip: {
    formatter({ value }) {
      if (!value[0]) {
        return
      }
      return (
        value[2] + ' <br/>' + '加权ROE: ' + value[0] + '%<br/>' + '资本充足率: ' + value[1] + '%'
      )
    },
    axisPointer: {
      show: true,
      type: 'cross',
      lineStyle: {
        type: 'dashed',
        width: 1
      }
    }
  },
  toolbox: {
    feature: {
      dataView: {
        show: true,
        title: '表格数据',
        lang: ['表格数据', '关闭'],
        buttonColor: '#ff791a',
        readOnly: true,
        emphasis: {
          iconStyle: {
            borderColor: '#ff791a'
          }
        },
        optionToContent(opt) {
          const cols = ['名称', '加权ROE%', '资本充足率']
          const data = opt.series[0].data
          const table = `<table class="dataViewTable">
              <thead>
                <tr class="dataViewTr">
                  ${cols
                    .map((item) => {
                      return `<td class="dataViewHead">${item}</td>`
                    })
                    .join('')}
                </tr>
              </thead>
              <tbody>
                ${data
                  .map((item) => {
                    return `<tr class="dataViewTr">
                    <td class="dataViewTd">${item[2]}</td>
                    <td class="dataViewTd">${item[0]}</td>
                    <td class="dataViewTd">${item[1]}</td>
                  </tr>`
                  })
                  .join('')}
              </tbody>
            </table>`
          return table
        }
      }
    }
  },
  series: [
    {
      data: [],
      type: 'scatter',
      symbolSize: 6,
      label: {
        show: true,
        position: [15, -2],
        color: '#999',
        formatter({ data }) {
          return data[2]
        }
      },
      itemStyle: {
        color: '#999'
      },
      markLine: {
        symbol: 'none',
        data: [{ yAxis: 13.5 }, { xAxis: 7.05 }],
        label: {
          position: 'end',
          color: '#ff791a',
          fontWeight: 'bold'
        },
        lineStyle: {
          type: 'solid',
          color: '#ff791a'
        }
      },
      emphasis: {
        label: {
          color: '#ff791a'
        },
        itemStyle: {
          color: '#ff791a'
        }
      }
    }
  ]
}
